<template>
    <div>
        <el-dialog :title="form.id ? '编辑分配规则' : '添加分配规则'" width="900px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="4">
                        <div class="tabs">
                            <div :class="[{'item-checked': form.to_type==1},'item']" @click="tabCheck(1)">
                                <div class="title">池到人</div>
                                <div class="desc">将设定范围内的线索分配给成员</div>
                            </div>
                            <!-- <div :class="[{'item-checked': form.to_type==2},'item']" @click="tabCheck(2)">
                                <div class="title">池到商户</div>
                                <div class="desc">将设定范围内的线索分配给商户</div>
                            </div> -->
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item prop="name" label="规则名称">
                                    <el-input v-model="form.name" type="text" placeholder="请输入" style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="线索范围">
                                    <el-radio-group v-model="form.fanwei_type">
                                        <el-radio label="1">所有新线索</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item prop="name" label="规则状态">
                                    <el-switch v-model="form.status" active-value='1' inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
                                </el-form-item>
                            </el-col>
                            <el-col v-if="form.to_type==1 && form.id" :span="24" class="form-item">
                                <el-form-item label="分配方式">
                                    <el-radio-group v-model="form.fenpei_type">
                                        <el-radio label="1">按顺序分配</el-radio>
                                        <el-radio label="2">按权重分配</el-radio>
                                        <el-radio label="3">按线索保有量</el-radio>
                                    </el-radio-group>
                                    <div v-if="form.fenpei_type==1" class="tip">按顺序分配给已添加的成员，线索进入后将自上而下按照A-B-C-D的顺序依次分配。<br/>每日最大上线最大值9999，最小值-1；-1代表无穷大，不受上限限制。</div>
                                    <div v-if="form.fenpei_type==2" class="tip">权重最大值为10，最小值为1；系统按权重给选中的员工按轮次顺序分配，每轮每个员工分配数量=权重值。<br/>每日最大上线最大值9999，最小值-1；-1代表无穷大，不受上限限制。</div>
                                    <div v-if="form.fenpei_type==3" class="tip">优先分配给下方选中成员中线索量最少的成员。<br/>每日最大上线最大值9999，最小值-1；-1代表无穷大，不受上限限制。</div>
                                </el-form-item>
                                <el-form-item prop="remind_time" label="分配成员">
                                    <!-- 表格 table -->
                                    <el-table ref="table" :data="userList" size="mini" border stripe highlight-current-row>
                                        <el-table-column prop="realname" label="姓名" />
                                        <el-table-column prop="sort" label="排序">
                                            <template #default="scope">
                                                <detail-item-edit type="number" :value="scope.row.sort" @change="(response) =>{return infoUpdate(response, scope.row, 'sort')}" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="max" label="每日最大上限">
                                            <template #default="scope">
                                                <detail-item-edit type="number" :value="scope.row.max" @change="(response) =>{return infoUpdate(response, scope.row, 'max')}" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="weight" label="权重">
                                            <template #default="scope">
                                                <detail-item-edit type="number" :value="scope.row.weight" @change="(response) =>{return infoUpdate(response, scope.row, 'weight')}" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="80">
                                            <template #default="scope">
                                                <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-button type="text" icon="el-icon-plus" @click="addMember">添加成员</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="form.to_type==2 && form.id" :span="24">
                                <el-form-item label="分配方式">
                                    <el-radio-group v-model="form.fenpei_type">
                                        <el-radio label="1">按顺序分配</el-radio>
                                        <el-radio label="2">按权重分配</el-radio>
                                        <el-radio label="3">按线索保有量</el-radio>
                                    </el-radio-group>
                                    <div v-if="form.fenpei_type==1" class="tip">按顺序分配给已添加的成员，线索进入后将自上而下按照A-B-C-D的顺序依次分配。<br/>每日最大上线最大值9999，最小值-1；-1代表无穷大，不受上限限制。</div>
                                    <div v-if="form.fenpei_type==2" class="tip">权重最大值为10，最小值为1；系统按权重给选中的员工按轮次顺序分配，每轮每个员工分配数量=权重值。<br/>每日最大上线最大值9999，最小值-1；-1代表无穷大，不受上限限制。</div>
                                    <div v-if="form.fenpei_type==3" class="tip">优先分配给下方选中成员中线索量最少的成员。<br/>每日最大上线最大值9999，最小值-1；-1代表无穷大，不受上限限制。</div>
                                </el-form-item>
                                <el-form-item prop="remind_time" label="分配成员">
                                    <!-- 表格 table -->
                                    <el-table ref="table" :data="userList" size="mini" border stripe highlight-current-row>
                                        <el-table-column prop="realname" label="姓名" />
                                        <el-table-column prop="sort" label="排序">
                                            <template #default="scope">
                                                <detail-item-edit type="number" :value="scope.row.sort" @change="(response) =>{return infoUpdate(response, scope.row, 'sort')}" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="max" label="每日最大上限">
                                            <template #default="scope">
                                                <detail-item-edit type="number" :value="scope.row.max" @change="(response) =>{return infoUpdate(response, scope.row, 'max')}" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="weight" label="权重">
                                            <template #default="scope">
                                                <detail-item-edit type="number" :value="scope.row.weight" @change="(response) =>{return infoUpdate(response, scope.row, 'weight')}" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="80">
                                            <template #default="scope">
                                                <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-button type="text" icon="el-icon-plus" @click="addMember">添加成员</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新建规则 -->
        <add-member-dialog ref="addMemberDialog" @success="getMemberList" />
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { saveRule, memberList, saveMember, delMember } from '@/api/cluePool'
import { deepClone } from '@/util'
import AddMemberDialog from './AddMemberDialog'
import DetailItemEdit from '@/components/DetailItemEdit'
export default {
    components: {
        AddMemberDialog,
        DetailItemEdit
    },
    data() {
        return {
            dialogVisible: false,
            pool_id: null,
            form: {
                id: null,
                pool_id: null,
                to_type: 1,
                name: '',
                fanwei_type: '1',
                rule: '',
                fenpei_type: '1',
                infos: '',
                status: '1'
            },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'change' }],
                pool_id: [{ required: true, message: '请选择线索池', trigger: 'change' }]
            },
            userList: []
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetParams();
            this.resetForm();
            console.log(item);
            if (item && item.id) {
                this.form = deepClone(item)
            }
            if (item && item.pool_id) {
                this.pool_id = item.pool_id;
            }
            this.getMemberList();
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                id: null,
                pool_id: null,
                to_type: 1,
                name: '',
                fanwei_type: '1',
                rule: '',
                fenpei_type: '1',
                infos: '',
                status: '1'
            };
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.form.pool_id = this.pool_id;
                    saveRule(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        },
        tabCheck(val) {
            this.$set(this.form, 'to_type', val);
        },
        getMemberList() {
            const params = {
                pid: this.form.id
            }
            memberList(params).then(res => {
                this.userList = res.data.list || []
            })
        },
        // 添加成员
        addMember() {
            this.$refs.addMemberDialog.showDialog(this.form.id); 
        },
        // 删除成员
        del(id) {
            this.$alert('确定将该成员删除？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        const params = {
                            id
                        }
                        delMember(params).then(res => {
                            if (res.status) {
                                this.getMemberList();
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 编辑成员信息
        infoUpdate(val, item, name) {
            const params = {...item}
            params[name] = val.value;
            saveMember(params).then(res => {
                if (res.status == '1') {
                    this.$message.success('操作成功！');
                    this.getMemberList();
                } else {
                    this.$message.error(res.message)
                }
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.tabs {
    border-right: 1px solid #eee;
    padding-right: 20px;
    .item {
        color: #333;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 10px;
        cursor: pointer;
        .title {
            font-size: 16px;
        }
        .desc {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
    }
    .item-checked {
        color: #409eff;
        border-color: #409eff;
        background: #edf0fd;
        .desc {
            color: #409eff;
        }
    }
}
.form-item {
    .tip {
        font-size: 12px;
        color: #999;
        line-height: 1.5em;
    }
}
</style>